<template>
  <view class="delivering-page">
    <view class="status-card success">
      <uniIcon type="checkmarkempty" size="24" color="#fff"></uniIcon>
      <text class="status-text">{{deliveryStatus === 'preparing'? '到店取餐' : deliveryStatus === 'completed'? '已送达':'配送中'}}</text>
      <text class="time">{{ order.orderDeliver?.psTime }}</text>
    </view>
    
    <view class="progress-container" v-if="deliveryStatus !== 'preparing'">
      <view class="progress-steps">
        <view class="step active">
          <view class="step-icon">1</view>
          <text class="step-text">到店取餐</text>
          <text class="step-time">{{ order.orderDeliver?.psTime }}</text>
        </view>
        <view class="step-line active"></view>
        
        <view class="step" :class="{'active': deliveryStatus === 'delivering' || deliveryStatus === 'completed'}">
          <view class="step-icon">2</view>
          <text class="step-text">配送中</text>
          <text class="step-time" v-if="deliveryStatus === 'delivering'">{{ order.orderDeliver?.psTime }}</text>
        </view>
        <view class="step-line" :class="{'active': deliveryStatus === 'delivering' || deliveryStatus === 'completed'}"></view>
        
        <view class="step" :class="{'active': deliveryStatus === 'completed', 'completed': deliveryStatus === 'completed'}">
          <view class="step-icon">3</view>
          <text class="step-text">已送达</text>
          <text class="step-time" v-if="deliveryStatus === 'completed'">{{order.orderDeliver?.sdTime }}</text>
        </view>
      </view>
    </view>
    
    <view class="order-info">
      <view class="info-item">
        <text class="label">订单号：</text>
        <text class="value">{{ order.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="label">商家：</text>
        <text class="value">{{ order.supplier.name}}</text>
      </view>
      <view class="info-item">
        <text class="label">客户：</text>
        <text class="value">{{ order.user.nickName }}</text>
      </view>
      <view class="info-item">
        <text class="label">地址：</text>
        <text class="value">{{ order.orderAddress?.detail || '暂无地址信息'}}</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="btn btn-primary" @click="startDelivery" v-if="deliveryStatus === 'preparing'">开始配送</button>
      <button class="btn btn-primary" @click="completeDelivery" v-if="deliveryStatus === 'delivering'">完成配送</button>
      <button class="btn btn-secondary" @click="contactCustomer">联系客户</button>
    </view>
  </view>
</template>

<script>
import uniIcon from "@/components/uni-icon/uni-icon.vue"
export default {
  components: {uniIcon},
  data() {
    return {
      currentTime: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}),
      deliveryStatus: 'preparing', // preparing, delivering, completed
      order: {
        id: '123456789',
        storeName: '麦当劳(王府井店)',
        customerName: '张先生',
        customerAddress: '北京市东城区东长安街1号东方广场E1座18层'
      }
    }
  },
  methods: {
    startDelivery() {
      const self = this;
      self._postBody(
        'user/order/updateOrderStatus', {
          'orderId': this.order.orderId,
          'deliverStatus': 3
        },
        function(res) {
          if (res.code === 1) {
            self.deliveryStatus = 'delivering';
            uni.showToast({
              title: '已开始配送',
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: res.data.message || '开始配送失败',
              icon: 'none'
            });
          }
        },
        (err) => {
      /*    uni.showToast({
            title: '网络错误',
            icon: 'none'
          });*/
        }
      );
    },
    completeDelivery() {
      const self = this;
      self._postBody(
        'user/order/updateOrderStatus', {
          'orderId': this.order.orderId,
          'deliverStatus': 4
        },
        function(res) {
          if (res.code === 1) {
            self.deliveryStatus = 'completed';
            uni.showToast({
              title: '配送已完成',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: 3
              })
            }, 1500)
          } else {
            uni.showToast({
              title: res.data.message || '完成配送失败',
              icon: 'none'
            });
          }
        },
        (err) => {
          // uni.showToast({
          //   title: '网络错误',
          //   icon: 'none'
          // });
        }
      );
    },
    contactCustomer() {
      uni.makePhoneCall({
        phoneNumber: this.order.customerPhone
      })
    }
  },
  onLoad(options) {
    if (options.order) {
      this.order = JSON.parse(options.order)
    }
    if (options.status === 'delivering') {
      this.deliveryStatus = 'delivering'
    } else if (options.from === 'deliveringList') {
      this.deliveryStatus = 'delivering'
    }
  }
}
</script>

<style lang="scss">
.delivering-page {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .status-card {
    background-color: #07c160;
    padding: 30rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    
    .status-text {
      font-size: 36rpx;
      font-weight: bold;
      margin: 20rpx 0 10rpx;
    }
    
    .time {
      font-size: 28rpx;
      opacity: 0.9;
    }
  }
  
  .progress-container {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .progress-steps {
      display: flex;
      flex-direction: column;
      
      .step {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        
        &-icon {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          background-color: #eee;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          color: #999;
          font-size: 28rpx;
        }
        
        &-text {
          font-size: 32rpx;
          color: #333;
          flex: 1;
        }
        
        &-time {
          font-size: 28rpx;
          color: #999;
        }
        
        &.active {
          .step-icon {
            background-color: #07c160;
            color: #fff;
          }
          .step-text {
            font-weight: bold;
          }
        }
        
        &.completed {
          .step-icon {
            background-color: #1989fa;
            color: #fff;
          }
          .step-text {
            font-weight: bold;
          }
        }
      }
      
      .step-line {
        height: 40rpx;
        width: 2rpx;
        background-color: #eee;
        margin-left: 24rpx;
        
        &.active {
          background-color: #07c160;
        }
      }
    }
  }
  
  .order-info {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .info-item {
      display: flex;
      margin-bottom: 20rpx;
      font-size: 28rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        color: #999;
        width: 120rpx;
      }
      
      .value {
        color: #333;
        flex: 1;
      }
    }
  }
  
  .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background: #fff;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .btn {
      flex: 1;
      margin: 0 10rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
      
      &-primary {
        background-color: #07c160;
        color: white;
      }
      
      &-secondary {
        background-color: #f8f8f8;
        color: #333;
        border: 1rpx solid #eee;
      }
    }
  }
}
</style>